<template>
  <div class="margin-container-list">
    <div class="tab-style-default">
      <el-tabs v-model="order.orderStatus" @tab-click="orderStatusClick">
        <el-tab-pane :label="labels[1]" name="1"> </el-tab-pane>
        <el-tab-pane :label="labels[2]" name="2"> </el-tab-pane>
        <el-tab-pane :label="labels[97]" name="97"> </el-tab-pane>
        <el-tab-pane :label="labels[98]" name="98"> </el-tab-pane>
        <el-tab-pane :label="labels[100]" name="100"></el-tab-pane>
      </el-tabs>
    </div>
    <!--顶部搜索 -->
    <div class="top-operate">
      <div>
        <el-select class="width-150" v-model="order.textCol">
          <el-option label="采购订单号" value="orderNo"></el-option>
          <el-option label="关联订单号" value="projectOrderNo"></el-option>
          <el-option label="关联退款申请号" value="afterSaleNo"></el-option>
        </el-select>
        <el-input class="width-200" v-model="order.textValue" placeholder="请输入内容"></el-input>
        <el-select class="width-150 pad-l-10" v-model="order.timeCol">
          <el-option label="生成时间" value="createTime"></el-option>
          <el-option label="发货时间" value="deliveryTime"></el-option>
          <el-option label="退款时间" value="refundMoneyTime"></el-option>
        </el-select>
        <el-date-picker
          v-model="order.timeValue"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-select v-if="order.orderStatus == 100" class="pad-l-10 width-170" v-model="orderStatus" placeholder="请选择订单状态">
          <el-option label="全部" value=" "></el-option>
          <el-option label="已付款" value="1"></el-option>
          <el-option label="已收货" value="3"></el-option>
        </el-select>
        <el-select v-if="order.orderStatus == 100" class="pad-l-10 width-170" v-model="refundStatus" placeholder="请选择退款状态">
          <el-option label="全部" value=" "></el-option>
          <el-option label="待退款" value="0"></el-option>
          <el-option label="已退款" value="1"></el-option>
        </el-select>
        <el-button-group class="mar-l-20">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button plain @click="resetSearch">重置</el-button>
        </el-button-group>
      </div>
      <div class="pad-t-10">
        <el-button type="primary" v-if="order.orderStatus == 100" @click="exportSelected">导出</el-button>
      </div>
    </div>
    <!-- 内容列表 -->
    <div class="table-container">
      <el-table ref="multipleTable" :data="dataList" @selection-change="handleSelectionChange" v-loading="listLoading" element-loading-text="加载中">
        <el-table-column width="50px" type="selection"></el-table-column>
        <el-table-column min-width="240px" label="订单信息" fixed="left">
          <template slot-scope="scope">
            <div class="flex v-align-c cursor-p" @click="showDetail(scope.row)">
              <label v-if="scope.row.goodsImageUrl"><img :src="scope.row.goodsImageUrl" class="user-avatar"></label>
              <div class="font-14 pad-l-10">
                <div v-if="scope.row.goodsTitle.length <= 20">{{scope.row.goodsTitle}}</div>
                <div v-if="scope.row.goodsTitle.length > 20">{{scope.row.goodsTitle.slice(0,20) + '...'}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="180px" label="采购订单号" prop="orderNo"></el-table-column>
        <el-table-column width="180px" label="关联订单号">
          <template slot-scope="scope">
            <div v-if="scope.row.projectOrder">
              {{scope.row.projectOrder.orderNo}}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="120px" label="商品数量" prop="goodsNum"></el-table-column>
        <el-table-column width="120px" label="采购金额" prop="supplierOrderPrice"></el-table-column>
        <el-table-column width="120px" label="已退金额" v-if="order.orderStatus == 98 || order.orderStatus == 100">
          <template slot-scope="scope">
            <div v-if="scope.row.afterSale && scope.row.refundStatus == 1">
              <div>￥{{scope.row.afterSale.refundAmount}}</div>
              <div class="font-blue" @click="showAfterSale(scope.row)">查看退款申请</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="120px" label="待退金额" v-if="order.orderStatus == 97 || order.orderStatus == 100">
          <template slot-scope="scope">
            <div v-if="scope.row.afterSale">
              <div>￥{{scope.row.afterSale.refundAmount}}</div>
              <div class="font-blue" @click="showAfterSale(scope.row)">查看退款申请</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="120px" label="状态" v-if="order.orderStatus == 100">
          <template slot-scope="scope">
            {{ dict.orderStatus[scope.row.orderStatus] }}
          </template>
        </el-table-column>
        <el-table-column width="180px" label="生成时间" prop="createTime"></el-table-column>
        <el-table-column width="120px" label="操作" align="right" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="showDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <div class="pagination">
      <el-pagination background 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange"
        :current-page="searchListQuery.currentPage"
        :page-sizes="[5, 10, 20, 50, 100]" 
        :page-size="searchListQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { pageApartOrder, statApartOrder } from '@/api/goods/apartOrder'
  import { downloadFile } from '@/api/common/common'

  export default {
    data() {
      return {
        // tab名称
        labels: {
          '1': '已付款(0)',
          '2': '已发货(0)',
          '97': '待退款(0)',
          '98': '已退款(0)',
          '100': '全部(0)'
        },
        // 查询条件
        order: {
          orderStatus: '1',
          timeCol: 'createTime',
          timeValue: [],
          textCol: 'orderNo',
          textValue: ''
        },
        searchListQuery: {},
        // 订单状态
        orderStatus: '',
        // 退款状态
        refundStatus: '',
        // 数据字典
        dict: {
          orderStatus: {}
        },
        total: 0,
        listLoading: false,
        dataList: [],
        multipleSelection: []
      }
    },
    // 初始化页面
    created() {
      this.init()
    },
    mounted() {
    },
    methods: {
      // 初始化
      init() {
        this.listLoading = true
        this.setSearchListQuery()
        statApartOrder({ enterpriseId: this.getEnterpriseId(), source: 30 }).then(response => {
          if (response.isError) return
          this.labels[1] = '已付款(' + (response.data[1] || 0) + ')'
          this.labels[2] = '已发货(' + (response.data[2] || 0) + ')'
          this.labels[97] = '待退款(' + (response.data[97] || 0) + ')'
          this.labels[98] = '已退款(' + (response.data[98] || 0) + ')'
          this.labels[100] = '全部(' + (response.data[100] || 0) + ')'
        })
        pageApartOrder(this.searchListQuery).then(response => {
          if (response.isError) return
          this.total = response.data.total
          this.dataList = response.data.records
          this.dict = response.data.dict
          this.listLoading = false
        })
      },
      // 设置查询条件
      setSearchListQuery() {
        this.searchListQuery = {
          enterpriseId: this.getEnterpriseId(),
          exceptionFlag: 0,
          closeFlag: 0,
          source: 30,
          currentPage: this.searchListQuery.currentPage,
          size: this.searchListQuery.size
        }
        switch (this.order.orderStatus * 1) {
          default:
          case 1:
          case 2:
            this.searchListQuery.orderStatus = this.order.orderStatus
            this.searchListQuery.refundStatusNullFlag = 1
            break
          case 97:
            this.searchListQuery.orderStatus = ''
            this.searchListQuery.closeFlag = ''
            this.searchListQuery.refundStatus = 0
            break
          case 98:
            this.searchListQuery.orderStatus = ''
            this.searchListQuery.closeFlag = ''
            this.searchListQuery.refundStatus = 1
            break
          case 100:
            this.searchListQuery.orderStatus = this.orderStatus
            this.searchListQuery.refundStatus = this.refundStatus
            this.searchListQuery.exceptionFlag = ''
            this.searchListQuery.closeFlag = ''
            break
        }
        this.searchListQuery.dateColumn = this.order.timeCol
        this.searchListQuery.startDate = (this.order.timeValue && this.order.timeValue.length > 0) ? this.order.timeValue[0] : ''
        this.searchListQuery.endDate = (this.order.timeValue && this.order.timeValue.length > 1) ? this.order.timeValue[1] : ''
        this.searchListQuery[this.order.textCol] = this.order.textValue
      },
      // 查询事件
      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.init()
      },
      // 重置事件
      resetSearch() {
        this.searchListQuery = {
          enterpriseId: this.getEnterpriseId(),
          exceptionFlag: 0,
          closeFlag: 0,
          source: 30,
          currentPage: 1,
          size: 10
        }
        this.order = {
          orderStatus: '1',
          timeCol: 'createTime',
          timeValue: [],
          textCol: 'orderNo',
          textValue: ''
        }
        this.init()
      },
      // tab切换事件
      orderStatusClick() {
        this.init()
      },
      // 查看退款申请
      showAfterSale(row) {
        this.$router.push({ path: '/order/after-sale/detail', query: { afterSaleId: row.afterSale.afterSaleId }})
      },
      // 查看详情
      showDetail(row) {
        this.$router.push({ path: '/order/purchase-order/detail', query: { apartOrderId: row.apartOrderId }})
      },
      // 导出事件
      exportSelected() {
        if (!this.multipleSelection.length) {
          this.setSearchListQuery()
          downloadFile('/order/apartOrder/exportOrder', this.searchListQuery, '联盟采购订单.xlsx')
          return
        }
        const orderIds = this.multipleSelection.map(item => item.orderId)
        downloadFile('/order/apartOrder/exportOrder', { enterpriseId: this.getEnterpriseId(), orderIds: orderIds.join(',') }, '联盟采购订单.xlsx')
      },
      // 列表勾选框事件
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.init()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.init()
      }
    }
  }
</script>

<style lang="less" scoped>
  .user-avatar {
    width: 90px;
    height: 90px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
</style>